<template>
  <div>
    姓名:{{name}}
    <!-- <slot :class="color1" /> -->
    <slot :className="color1[0]">
      <!-- 这里插入的内容是父级没有提供插槽内容时的备用内容，而不是插槽的插槽 -->
      <p>WithSlot backup slot content!!</p>
    </slot>
    <slot name="slot1" />
  </div>
</template>
<script>
export default {
	data() {
		return {
			name: 'corleone xiao',
			color1: ['red-color']
		};
	},
	mounted() {
		console.log('scope Slot default:', this.$scopedSlots.default({className: 'hehe'}), 'this.$slot:', this.$slots, 'this.$scopedSlot:', this.$scopedSlots, 'scope Slot slot1:', this.$scopedSlots.slot1());
	},
};
</script>
<style lang="less" scoped>
.red-color {
  color: indianred;
}
</style>